<template>
    <div class="swiper">
        <swiper :options="swiperOption" class="czp" :style="{height:h}">
            <swiper-slide>
                <img src="../../assets/img/lb01.jpg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img src="../../assets/img/lb02.jpg" alt="">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import {swiper,swiperSlide} from 'vue-awesome-swiper'

export default{
    data(){
        return{
            h:'211px',
            swiperOption:{
                pagination:{
                    el:'.swiper-pagination',
                    clickable:true
                },
                autoplay:{
                    delay:1500,
                    stopOmLastSlide:false,
                    disableOnInteraction:true
                }
            }
        }
    },
    // 页面挂载完毕后，根据屏幕的宽度，计算轮播图的高度
    mounted(){
        let picWidth = 720; // 图片宽
        let picHeight = 360; // 图片高
        let screenWidth = window.screen.width; // 屏幕宽
        let swipeHeight = 
            Math.floor((picHeight*screenWidth)/picWidth)+"px";
        this.h = swipeHeight;
    },
    components:{
        swiper,
        swiperSlide
    }
}
</script>
<style scoped>
.swiper{
    margin-top: 2.44rem;
}
.swiper-wrapper {
  height: 211px;
}
.swiper-wrapper img{
  width: 100%;
}
</style>